<template>
  <div class="filter">
    <el-row type="flex">
      <el-col :span="6">
        <el-row type="flex" class="price">
          <el-col>价格 </el-col>
          <el-col>0-{{ price }}</el-col>
        </el-row>

        <el-slider
          v-model="price"
          :max="4000"
          @change="changePrice"
        ></el-slider>
      </el-col>
      <el-col :span="5"
        >住宿等级
        <el-row>
          <el-dropdown placement="bottom" @command="levelsHandleCommand">
            <span class="el-dropdown-link">
              {{
                levels.length == 0
                  ? "不限"
                  : levels.length == 1
                  ? hotelType.levels[levels[0] - 1].name
                  : "已选" + levels.length + "项"
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :icon="
                  levels.indexOf(level.id) == -1
                    ? 'iconfont iconcircle'
                    : 'iconfont iconright-1'
                "
                v-for="level in hotelType.levels"
                :key="level.id"
                :command="level.id"
              >
                {{ level.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-row>
      </el-col>
      <el-col :span="5"
        >住宿类型
        <el-row>
          <el-dropdown placement="bottom" @command="typesHandleCommand">
            <span class="el-dropdown-link">
              {{
                types.length == 0
                  ? "不限"
                  : types.length == 1
                  ? hotelType.types[types[0] - 1].name
                  : "已选" + types.length + "项"
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :icon="
                  types.indexOf(type.id) == -1
                    ? 'iconfont iconcircle'
                    : 'iconfont iconright-1'
                "
                v-for="type in hotelType.types"
                :key="type.id"
                :command="type.id"
              >
                {{ type.name }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-row>
      </el-col>
      <el-col :span="5"
        >酒店设施
        <el-row>
          <el-dropdown placement="bottom" @command="assetsHandleCommand">
            <span class="el-dropdown-link">
              {{
                assets.length == 0
                  ? "不限"
                  : assets.length == 1
                  ? hotelType.assets[assets[0] - 1].name
                  : "已选" + assets.length + "项"
              }}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>

            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                :icon="
                  assets.indexOf(asset.id) == -1
                    ? 'iconfont iconcircle'
                    : 'iconfont iconright-1'
                "
                v-for="asset in hotelType.assets"
                :key="asset.id"
                :command="asset.id"
                >{{ asset.name }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-row>
      </el-col>
      <el-col :span="5"
        >酒店品牌
        <el-row>
          <el-dropdown placement="bottom" @command="brandsHandleCommand">
            <span class="el-dropdown-link">
              {{ brandName }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>

            <el-dropdown-menu slot="dropdown" class="brands-menu">
              <el-dropdown-item
                :icon="
                  brands.indexOf(brand.id) == -1
                    ? 'iconfont iconcircle'
                    : 'iconfont iconright-1'
                "
                v-for="(brand, index) in hotelType.brands"
                :key="brand.id"
                :command="[brand.id, index]"
                >{{ brand.name }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-row>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="revocation"
          >撤销条件</el-button
        ></el-col
      >
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotelType: {},
      price: 4000,
      levels: [],
      brands: [],
      assets: [],
      types: [],
      brandName: "不限",
    };
  },
  watch: {
    levels() {
      this.$emit("filter", {
        price: this.price,
        hotellevel: this.levels,
        hotelbrand: this.brands,
        hotelasset: this.assets,
        hoteltype: this.types,
      });
    },
    brands() {
      this.$emit("filter", {
        price: this.price,
        hotellevel: this.levels,
        hotelbrand: this.brands,
        hotelasset: this.assets,
        hoteltype: this.types,
      });
    },
    assets() {
      this.$emit("filter", {
        price: this.price,
        hotellevel: this.levels,
        hotelbrand: this.brands,
        hotelasset: this.assets,
        hoteltype: this.types,
      });
    },
    types() {
      this.$emit("filter", {
        price: this.price,
        hotellevel: this.levels,
        hotelbrand: this.brands,
        hotelasset: this.assets,
        hoteltype: this.types,
      });
    },
  },
  created() {
    this.$axios({
      url: "/hotels/options",
    }).then((res) => {
      console.log(res);
      this.hotelType = res.data.data;
    });
  },
  methods: {
    revocation() {
      this.price = 4000;
      this.levels = [];
      this.brands = [];
      this.assets = [];
      this.types = [];
    },
    changePrice(data) {
      this.$emit("filter", {
        price: data,
        hotellevel: this.levels,
        hotelbrand: this.brands,
        hotelasset: this.assets,
        hoteltype: this.types,
      });
    },
    levelsHandleCommand(command) {
      console.log(command);
      let index = this.levels.indexOf(command);
      if (index == -1) {
        this.levels.push(command);
      } else {
        this.levels.splice(index, 1);
      }
    },
    brandsHandleCommand(command) {
      console.log(command);
      let index = this.brands.indexOf(command[0]);
      if (index == -1) {
        this.brands.push(command[0]);
      } else {
        this.brands.splice(index, 1);
      }
      if (this.brands.length == 1) {
        this.brandName = this.hotelType.brands[command[1]].name;
      } else if (this.brands.length > 1) {
        this.brandName = "已选" + this.brands.length + "项";
      } else {
        this.brandName = "不限";
      }
    },
    assetsHandleCommand(command) {
      console.log(command);
      let index = this.assets.indexOf(command);
      if (index == -1) {
        this.assets.push(command);
      } else {
        this.assets.splice(index, 1);
      }
    },
    typesHandleCommand(command) {
      console.log(command);
      let index = this.types.indexOf(command);
      if (index == -1) {
        this.types.push(command);
      } else {
        this.types.splice(index, 1);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.filter {
  border: 1px solid #ccc;
  .el-row {
    padding: 5px 0;
    .el-col {
      border-left: 1px solid #ccc;
      padding: 5px 20px;
      // text-align: center;
    }
    .el-col:nth-child(1) {
      border: none;
      // padding-left: 0;
    }
    .price {
      padding: 0;
      .el-col {
        border: none;
        padding: 0;
        // text-align: center;
      }
    }
  }
}
.el-dropdown {
  width: 100%;
  .el-dropdown-link {
    display: inline-block;
    width: 100px;
    i {
      float: right;
      line-height: 20px;
    }
  }
}
.el-dropdown-menu {
  width: 165px;
  // height: 240px;
}
.brands-menu {
  height: 240px;
  overflow: auto;
}
</style>
